<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="../subPages/css.jsp"%>
<link href="css/login.css" rel="stylesheet" type="text/css" />
<body class="small-width" style="background:url(${ALIYUNOSSURL}${REGISTERSIMG};">
	<%@include file="../subPages/top.jsp"%>
	<div class="container">
		<div class="row p0 mt30 user-register" >
			<div class="visible-lg-block col-lg-8"></div>
			<div class="col-sm-12 col-lg-4 p0 shadow panel panel-default border">
				<div id="warnMessage" class="col-sm-12 text-error mb15"></div>
				<div class="panel-body">
					<ul id="myTab" class="nav nav-tabs">
						<li class="active" id="emailActive"><a href="#emailReg" data-toggle="tab"
							style="border-left:0px!important;">邮箱注册</a>
						</li>
						<li id="phoneActive"><a href="#phoneReg" data-toggle="tab">手机注册</a>
						</li>
					</ul>
					<div id="myTabContent" class="tab-content p30 pt5 pb0">
						<div class="tab-pane fade active in" id="emailReg">
							<form role="form" class="form-horizontal p15" action="register" onsubmit="return iEmailRegister();" method="post">
								<div class="form-group has-feedback" id="regEmail-input">
									<label class="sr-only">邮箱</label>
									<input type="text" class="form-control" placeholder="请输入邮箱" id="email" name="email" onblur="iValidateEmail()" value="${model.email }"/>
									<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
									<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
								</div>
								<div class="form-group">
									<label class="sr-only">密码</label>
									<input type="password" class="form-control" placeholder="请输入密码" id="password" name="password" ${model.password }>
								</div>
								<div class="form-group">
									<label class="sr-only">验证码</label>
									<input type="text" class="form-control" id="randomImageStr" placeholder="请输入验证码，不区分大小写" /> 
									<input type="hidden" value="" id="Md5randomImageStr" name="randomImageStr" />
								</div>
								<div class="form-group">
									<label class="sr-only">验证码</label>
									<img src="authImg.img" id="image" onclick="changeimg('image','randomImageStr');" /> 
									<a class="dis-in-blo ml10" title="忘记密码？ " href="javascript:void(0)" onclick="changeimg('image','randomImageStr');">看不清？ </a>
								</div>
								
								<div class="form-group">
									<label class="sr-only">用户服务协议</label>
									<input type="checkbox" id="check1" onchange="setChanage('check1','subBtn')" checked="checked">我已接受<a>用户服务协议</a>
								</div>
								<div class="form-group">
									<input type="submit" class="btn btn-block btn-success" id="subBtn" value="注册">
								</div>
							</form>
						</div>
						<div class="tab-pane fade" id="phoneReg">
							<form role="form" class="form-horizontal p15" action="registerByPhone" onsubmit="return iPhoneRegister();" method="post">
								<div class="form-group has-feedback" id="regPhone-input">
									<label class="sr-only">手机</label>
									<input type="text" id="phone" name="phone" class="form-control" placeholder="请输入手机号码" aria-describedby="basic-addon2" value="${model.phone}" onblur="iValidatePhone()"/>
									<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
									<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
								</div>
								<div class="form-group">
									<table class="w">
										<tr>
										<td style="width:100px;">
											 <img src="authImg.img" id="image2" class="left-radius w h" onclick="changeimg('image2','randomImageStr');" /> 
										</td>
										<td>
											<input type="text" class="form-control no-left-radius" id="randomPhoneImageStr" placeholder="不区分大小写" />
										</td>
										</tr>
									</table>
									    <input type="hidden" value="" id="Md5randomPhoneImageStr" name="randomImageStr" /> 
								</div>
								
								<div class="form-group p0">
									 <input class="btn btn-info no-right-radius w-50 m0 fl" type="button" id="phoneBtnBySMS" onclick="iSendEmailOrPhoneRomdon('phoneBtnBySMS','phone','warnMessage','verifyPhone','phoneSubBtn','randomPhoneImageStr')" value="短信验证码"/>
									 <input class="btn btn-warning no-left-radius w-50 m0 fl" type="button" id="phoneBtnByVoice" onclick="iSendEmailOrPhoneRomdon('phoneBtnByVoice','phone','warnMessage','verifyPhone','phoneSubBtn','randomPhoneImageStr')" value="语音验证码"/>
								</div>
								
								
								<div class="form-group">
									<label class="sr-only">验证码</label>
									<input type="text" class="form-control"  name="securityCode" placeholder="请输入收到的手机验证码" /> 
								</div>
								<div class="form-group">
									<label class="sr-only">密码</label>
									<input type="password" class="form-control" placeholder="密码6-20位" id="phonePassword" name="password" value="${model.password }">
								</div>
								<div class="form-group">
									<label class="sr-only">用户服务协议</label>
									<input type="checkbox" id="check2" onchange="setChanage('check2','phoneSubBtn')" checked="checked">我已接受<a>用户服务协议</a>
								</div>
								<div class="form-group">
									<input type="submit" class="btn btn-block btn-success" id="phoneSubBtn" value="注册">
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
	<!-- 可选: 包含 jQuery 库 -->
	<%@include file="../subPages/footer.jsp"%>
	<script type="text/javascript" src="js/jQuery.md5.js"></script>
	<script type="text/javascript" src="js/register.js"></script>
	<script type="text/javascript">
	    var flag='${changeFlag}';
	    console.info(flag);
	    if(flag=="phone"){
	    	if($("#emailReg").hasClass("active in")){
	    		$("#emailReg").removeClass("active in");
	    		$("#emailActive").removeClass("active");
	    		$("#phoneReg").addClass("active in");
	    		$("#phoneActive").addClass("active");
	    	}
	    }
        showMessage('warnMessage', '${succMess}',true,3);
	</script>

</body>
</html>
